<template>
    <div class="">

        <!-- 分享蒙层 -->
        <!-- :style="{ height: '34.03%' }" -->
<img :src="require('@/assets/shop/dzsmile.png')" alt="" class="imgbg" />
        <van-popup class="share_mask" v-model="giftShow" position="bottom" @close="onMask">

            <div class="gift_border ">
                <!-- giftValue -->
                <div class="gift_once0">
                    <div class="bgtitle">
                        *高点赞量可以提高
                        <br>
                        &#8194;曝光度和排名哦！
                    </div>
                </div>
                <div :class="['gift_once',giftValue.id==item.id?'gift_once_border2':'gift_once_border1']" v-for="(item,index) of giftList"
                    :key="index" @click="onClickGift(item)">
                    <van-icon v-if="giftValue.id==item.id" class="gift_click" name="checked" color="#1AAC1B" />
                    <van-image class="gift_img" :src="domainUrl+'/'+item.pic" />
                    <div class="gift_title">{{item.name}}</div>
                    <div class="gift_num">{{item.like}}赞</div>
                </div>
            </div>
            <div class="gift_payfor" @click="onSubmit">微信支付</div>
        </van-popup>

    </div>
</template>
<script>
import Util from '@/util/common';
import { Toast } from 'vant';
export default {
    name: "app_gift",
    //属性
    props: {
        bounty: {
            type: null,//属性类型
            value: ""
        },
        module: {
            type: null,//属性类型
            value: ""
        },
        userid: {
            type: null,//属性类型
            value: ""
        },

    },
    data() {
        return {
            domainUrl: this.$conf.domain,
            giftShow: true,
            giftList: [],
            giftValue: '',

        }
    },

    created() {
        // this.onShows()
        this.onInitData()
    },
    methods: {
        onClickGift(item) {
            this.giftValue = item
        },
        onMask() {
            var that = this;
            that.$emit('onMask', '1')
        },
        onInitData() {
            var that = this;
            that.giftList = []
            var list = that.bounty
            for (var i in list) {
                that.giftList.push(list[i])
            }
        },
        onSubmit() {
            var that = this;
            if (that.giftValue == '') {
                this.$toast('请先选择礼物')
                return
            }
            var data = {
                id: that.userid,
                module: that.module,
                type: that.giftValue.id
            }
            this.$dopost('/sysapi/pay/bounty/', data, function (res) {
                if (res.data && typeof (res.data.error) != "undefined" && res.data.error === 0) {
                    window.location.href = '/pay/js/id/' + res.data.data.id + ''
                } else {
                    Toast((res.data && res.data.mess) ? res.data.mess : '接口错误');
                }
            }.bind(this), true);
        },

    },

}


</script>

<style scoped="scoped">
 
.share_mask {
    height: 75%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
}
.gift_border {
    width: 94%;
    display: flex;
    flex-wrap: wrap;
}
.gift_once0 {
    width: 64.7%;
    margin: 0.1rem 1%;
    height: 4.8rem;
}
.imgbg {
    width: auto;
    height: 3.8rem;
    position: fixed;
    top: 18%;
    left: 5%;
    z-index: 999999999;
}
.bgtitle {
    color: #f1911f;
    margin: 1.7rem 1rem 1rem 2.4rem;
    font-size: 17px;
}
.gift_once {
    width: 31.3%;
    margin: 0.1rem 1%;
    height: 4.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #303030;
    padding: 0.2rem 0 0.3rem;
    border-radius: 0.06rem;
    position: relative;
}

.gift_once_border1 {
    border: 0.06rem solid #d9d9d9;
}
.gift_once_border2 {
    border: 0.06rem solid #1aac1b;
}
.gift_click {
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    font-size: 1.3rem;
}
.gift_img {
    width: 2rem;
    height: 2rem;
}
.gift_title {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}
.gift_num {
    font-size: 0.7rem;
    color: #bc6c7a;
    margin-top: 0.06rem;
}
.gift_payfor {
    width: 75%;
    padding: 0.7rem 0.7rem;
    color: #ffffff;
    background-color: #1aac1b;
    font-size: 1rem;
    margin-top: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
}
</style>
